﻿@{
    ViewBag.Title = "商品收藏统计";

}
@section styles{
    <link href="~/static/css/client.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/system.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/contract.css" type="text/css" rel="stylesheet" />
}
<style>
    a {
        text-decoration: none;
    }
</style>
<div class="layui-fluid layui-content">
    <div class="layui-title layui-clear layui-row">
        <h2 class="layui-col-md10 layui-col-sm9 layui-col-xs7">@ViewBag.Title</h2>
        @*<div class="layui-col-md2 layui-col-sm3 layui-col-xs5 layui-nav-item">
                <a class="layui-btn layui-btn-xs layer-load-new" onclick="LayerOpen('添加关键字','@Url.Action("Create")')">添加关键字</a>
            </div>*@
    </div>

    <div class="layui-eacher layui-row layui-clear">
        <form class="layui-clear">
            @*<div class="layui-form layui-clear">
                    <div class="layui-col-md6 layui-col-pc7 layui-col-lg7 layui-form-group">
                        <label class="layui-form-label">
                            关键字：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="keyword" id="keyword" />
                        </div>
                    </div>
                    <div class="layui-col-md1">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" id="search" type="button"> 搜索 </button>
                    </div>
                </div>*@
        </form>
    </div>
    <div class="layui-data layui-table-container">
        <div id="containertable" style="height:300px">

        </div>
        <table class="layui-hide layui-table" id="layui-table" lay-filter="table"></table>
    </div>
</div>
<div id="Layer_ajax" class="deploy-plus"></div>

@section scripts{
    @*
        <script src="~/Theme/js/content.min.js?v=1.0.0"></script>*@
    <script src="~/static/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.excheck.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.exedit.js" type="text/javascript"></script>
    <script src="~/Scripts/ECharts/echarts.js"></script>
    <script src="~/js/main.js"></script>

    @*
        <script src="~/Theme/js/plugins/layer/laydate/laydate.js"></script>*@
    <script type="text/javascript">
        var tables;
        var tableH = $(".layui-table-container").height();
        layui.use(['form', 'layedit', 'laydate', 'tree', 'table', 'layer', 'upload'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , form = layui.form
                , table = layui.table
                , upload = layui.upload;


            tables = table.render({
                elem: "#layui-table",
                url: '/Home/GetShopCollectionData',
                cellMinWidth: 26,
                height: tableH / 2,

                cols: [[
                    { field: 'productName', title: '商品名称' },
                    { field: 'marketPrice', title: '商品价格（￥）' },
                    { field: 'collectionCount', title: '收藏量' }
                ]],
                id: "idTest",
                page: false,

            });

            $('#search').on('click', function () {
                table.reload('idTest', {
                    where: {
                        shopTypeid: $('#shopTypeid').val(),
                        keyword: $('#keyword').val(),
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })

            })
        });

        $("#layui-Area").click(function () {
            $(".layui-Area .layui-Area-hide").toggleClass("layui-Area-show")
            $(this).parent(".layui-form-select").toggleClass("layui-form-selected");
        });

        $(".layui-Area").mouseleave(function () {
            $(".layui-Area .layui-Area-hide").removeClass("layui-Area-show")
        })

        $(document).ready(function () {

        });
        var myChart = echarts.init(document.getElementById('containertable'));
       
        var option={
            color: ['#3398DB'],
            title: {
                text: '收藏商品Top10'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['收藏数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {}
            ],
            series: [
                {
                    name: '收藏数',
                    type: 'bar',
                    barWidth: '60%',
                    data: []
                }
            ]
        };
        //$.get('/Home/GetCollectionCountData').done(function (data) {
        //    // 填入数据
        //    myChart.setOption({
        //        xAxis: {
                    
        //        },
        //        series: [{
        //            // 根据名字对应到相应的系列
        //            name: '收藏数',
        //            data: data.result[1]
        //        }]
        //    });
        //});
        $(function () {
            myChart.setOption(option);
            $.ajax({
                url: "/Home/GetCollectionCountData",
                method: "get",
                data: "json",
                success: function (data) {
                    myChart.setOption(data.result);
                }
            });
        })

        function ReloadAjaxCallbackgoback(data, successInfo) {
            CommonAjaxCallback(data, function () {
                tables.reload('idTest', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
            }, successInfo)
        }
    </script>
}

